<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小麦智慧生产大数据平台</title>
	<link rel="stylesheet" href="../assets/style.css">
	<link rel="stylesheet" href="../assets/platform/css/map.css">
	<style>
	 	 p .counter { display: block; margin: 20px auto; font-size: 64px; font-family: Arial; font-weight: bold; }
		 .notice1 {
				 width: 100%;/*单行显示，超出隐藏*/
				 height: 90%;/*固定公告栏显示区域的高度*/
				 /* padding: 0 30px; */
				 /* background-color: #b3effe; */
				 overflow: hidden;
			}
		 .notice1 .datadetail{
				padding-left:0px;
				list-style: none;
				 line-height: 49px;
				 /*以下为了单行显示，超出隐藏*/
				 display: block;
				 text-align:left;
				 white-space: nowrap;
				 text-overflow: ellipsis;
				 overflow: hidden;
			}
			.inform .notice {
				 width: 100%;/*µ¥ÐÐÏÔÊ¾£¬³¬³öÒþ²Ø*/
				 height: 35px;/*¹Ì¶¨¹«¸æÀ¸ÏÔÊ¾ÇøÓòµÄ¸ß¶È*/
				 /* padding: 0 30px; */
				 /* background-color: #b3effe; */
				 overflow: hidden;
			}
			.inform .notice ul{
				padding-left:0px;
			}
			.inform .notice ul li {
				 list-style: none;
				 line-height: 35px;
				 /*ÒÔÏÂÎªÁËµ¥ÐÐÏÔÊ¾£¬³¬³öÒþ²Ø*/
				 display: block;
				 text-align:left;
				 white-space: nowrap;
				 text-overflow: ellipsis;
				 overflow: hidden;
			}
		 #container{
					                top:-40px;
		 }
	</style>
</head>
<body>
<!-- 顶部 -->
	<div class="top">
		<div class="left nav ">
			<div class="index">
				<a href="../platform/index.html" ><img src="../assets/platform/images/index.png" alt=""></a>
			</div>
			<ul >
				<li class="">
					<img src="../assets/platform/images/border.jpg" alt="边框">
					<a href="../yield/index.html">产量监测</a>
					<img src="../assets/platform/images/border2.jpg" alt="边框">
				</li>
				<li>
					<img src="../assets/platform/images/border.jpg" alt="边框">
					<a href="../monitor/index.html">灾害预警</a>
					<img src="../assets/platform/images/border2.jpg" alt="边框">
				</li>
			</ul>
		</div>

		<div class="title">
			小麦智慧生产大数据平台
		</div>

		<div class="right nav">
			<ul >
				<li class="">
					<img src="../assets/platform/images/border.jpg" alt="边框">
					<a href="../weather/index.html">物联网</a>
					<img src="../assets/platform/images/border2.jpg" alt="边框">
				</li>
				<li>
					<img src="../assets/platform/images/border.jpg" alt="边框">
					<a href="../repository/index.html">知识库</a>
					<img src="../assets/platform/images/border2.jpg" alt="边框">
				</li>
			</ul>
		</div>

	</div>
<!-- 顶部结束 -->
<!-- 内容部分 -->
	<div class="wrapper" >
		<!-- 上面 -->
		<div class="uper">
			<ul >
				<li class="data">
					<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
					</div>
					<div class="item">
						
						<p class="item_title">预测产量（万吨）</p>
						<p class="item_data color2 counter">3450.16</p>
					</div>
				</li>

				<li class="data">
					<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
					</div>
					<div class="item">
						<p class="item_title">种植面积（万亩）</p>
						<p class="item_data color1 counter">8123.2</p>
					</div>
				</li>

				<li class="data">
					<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
					</div>
					<div class="item">
						<p class="item_title">数据总量（万条）</p>
						<p class="item_data color3 counter">1274</p>
					</div>
				</li>

				<li class="data">
					<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
					</div>
					<div class="item">
						<p class="item_title">决策量（万条）</p>
						<p class="item_data color4 counter">130.3</p>
					</div>
				</li>

				<li class="data">
					<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
					</div>
					<div class="item">
						<p class="item_title">警告次数（次）</p>
						<p class="item_data color5 counter">357</p>
					</div>
				</li>

				<li class="data">
					<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
					</div>
					<div class="item">
						<p class="item_title">知识库（万条）</p>
						<p class="item_data color7 counter">330</p>
					</div>
				</li>

				<li class="data">
					<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
					</div>
					<div class="item">
						<p class="item_title">物联网数据（万条）</p>
						<p class="item_data color6 counter">492</p>
					</div>
				</li>

				
	
			</ul>

		</div>
<!-- 下面 -->
		<div class="below">
			<!-- 左边 -->
			<div class="left">
				<div class="border_line">
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
				</div>
				<div class="title">各级县市产量预测</div>
				<div class="list_data">
				    <!-- 数据字段 -->
					<div class="list_header">
						<span>市</span>
						<span>产量（万吨）</span>
					</div>
					<!-- 数据列表 -->
					<div class="notice1" onmouseover="hover()" onmouseout="notHover()">
						<ul>
					<div class="datadetail">

						<span class="color2">周  口  市
</span>
						
						<span class="color3">544.06</span>
					</div>
					<div class="datadetail">
						<span class="color2">驻 马 店 市
</span>
						
						<span class="color3">506.79

</span>
					</div>
					<div class="datadetail">
						<span class="color2">商  丘  市
</span>
						
						<span class="color3">434.81
</span>
					</div>
					<div class="datadetail">
						<span class="color2">南  阳  市
</span>
						
						<span class="color3">415.41
</span>
					</div>
					<div class="datadetail">
						<span class="color2">新  乡  市
</span>
						
						<span class="color3">270.11
</span>
					</div>
					<div class="datadetail">
						<span class="color2">安  阳  市
</span>
						
						<span class="color3">208.47
</span>
					</div>
					<div class="datadetail">
						<span class="color2">开  封  市
</span>
						
						<span class="color3">189.54
</span>
					</div>
					<div class="datadetail">
						<span class="color2">许  昌  市
</span>
						
						<span class="color3">166.52
</span>
					</div>
					<div class="datadetail">
						<span class="color2">濮  阳  市
</span>
						
						<span class="color3">165.34
</span>
					</div>
					<div class="datadetail">
						<span class="color2">信  阳  市
</span>
						
						<span class="color3">147.34
</span>
					</div>
												</ul>
											<ul id="p2"></ul>
					</div>


				</div>

			</div>
			<!-- 中间 -->
			<div class="mid">
				<div class="border_line">
					<div id="container"></div>
						<span class="tr"></span>
						<span class="tb"></span>
						<span class="rt"></span>
						<span class="rb"></span>
				</div>
			</div>
			<!-- 右边 -->
			<div class="right">

				<div class="damage">
					<div class="border_line">
							<span class="tr"></span>
							<span class="tb"></span>
							<span class="rt"></span>
							<span class="rb"></span>
					</div>
					<div class="title">实时预警</div>
					<div class="inform">
						<img src="../assets/platform/images/inform.png" alt="">
			<!-- 			<span>今天降雨量较多，请注意防范！！</span> -->
						<div class="notice">
										<ul>
											<li><span>1、今天降雨量较多，请注意防范！！</span></li>
											<li><span>2、部分地区有大风预警，请做好防护措施</span></li>
											<li><span>3、雾霾浓度较高，可见度100米以内，请注意防范！！</span></li>
											<li><span>4、今天暴雨较多，请注意防范！！</span></li>
											<li><span>5、高温红色预警，请做好降暑的准备！</span></li>
										</ul>
									</div>
					</div>
					<div class="temperature">
						<span class="color3 avgtem">平均温度：</span>
						<div class="one">
							<img src="../assets/platform/images/sun.png" alt="晴天">
							<span >16-28℃</span>
						</div>
						<div class="one">
							<img src="../assets/platform/images/cloudy.png" alt="多云">
							<span >16-22℃</span>
						</div>
					</div>
					<div class="list color6">
						<div class="listcont">
							<span>风力：二级</span>
						</div>
						<div class="listcont">
							<span>风向：东南</span>
						</div>
					</div>
					<div class="list color2">
						<div class="listcont">
							<span >空气质量：轻度污染</span>
						</div>
					</div>
					<div class="list color5">	
						<div class="listcont">
							<span>可见度：100米</span>
						</div>	
					</div>

				</div>

				<div class="yield"> 
					<div class="border_line">
							<span class="tr"></span>
							<span class="tb"></span>
							<span class="rt"></span>
							<span class="rb"></span>
					</div>
					<div class="title">数据统计</div>
					<div>
						 <div id="main" style="width: 440px;height:390px;margin-left:30px;margin-top:-6px;"></div>

					</div>
				</div>
			</div>
		</div>
	</div>



	<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <!-- 加载plugins方法：在src后边加参数名，以"，"隔开 -->
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.14&key=8d3db83c0aa5ea0202622aa204fe2f38'></script>
    <!-- UI组件库 1.0 -->
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    
    
    
    
    <!-- <script type="text/javascript" src="./echarts.all.js"></script> -->
    	<script src="https://cdn.bootcss.com/echarts/4.1.0-rc.1/echarts.min.js"></script>
		<!-- <script type="text/javascript" src="js/echarts-3.8.5.min.js"></script> -->
		<script src="../assets/echarts-gl.min.js"></script>
		<script type="text/javascript" src="../assets/echarts-bmap.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script> -->
<!--     <script type="text/javascript" src="./echarts.js"></script>
 -->    <script src="../assets/platform/js/jquery.waypoints.min.js"></script>
	<script type="text/javascript" src="../assets/platform/js/jquery.countup.min.js"></script>
	<script src="../assets/platform/js/3dmap.js"></script>
    <script type="text/javascript">
    
    var myChart = echarts.init(document.getElementById('main'));
	var data=[
            {value:200, name:'气象'},
            {value:360, name:'物联网'},
            {value:480, name:'知识库'},
            {value:600, name:'生产数据'},
            {value:800, name:'管理数据'},
            {value:320, name:'图像遥感'},
            
        ];
	var option = {
    // title : {
    //     text: '同名数量统计',
    //     subtext: '纯属虚构',
    //     x:'center'
    // },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        left: 10,
        top: 20,
        bottom: 20,
        data:data,

        // selected: data.selected
    },
    series : [
        {
            name: '数据条数（条）',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data: data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
            }
        }
    ]
};

	myChart.setOption(option);
    </script>
    <script type="text/javascript">
		/*function noticeUp(obj,top,time) {
				 $(obj).animate({
				 	marginTop: top
				 }, time, function () {
				 	$(this).css({marginTop:"0"}).find(":first").appendTo(this);
				 })
			}
			
			var timer = setInterval("noticeUp('.notice ul','-48px',500)", 2500);
			 //});
			 
			 $(function () {
				    $(".notice").hover(function() {
				        clearInterval(timer);
				    }, function () {
				        timer = setInterval("noticeUp('.notice ul','-48px',500)", 2500);
				    })
				})*/

	var n=document.getElementsByClassName("notice1")[0];
    var p1=n.getElementsByTagName("ul")[0];
    var p2=document.getElementById("p2");
	p2.innerHTML=p1.innerHTML;
    //var p2=document.getElementById("p2");
    //p2.innerHTML=p1.innerHTML;
    //alert(n.offsetHeight+" 1  "+p1.offsetHeight);
    console.log(n);
    console.log(p1);
    var func = function(){
        n.scrollTop++;
        if(n.scrollTop >= p1.offsetHeight){
            //alert(n.scrollTop+" 1  "+p1.offsetHeight);
            n.scrollTop=0;
        }
    }
    var timer1 = setInterval(func,20);
    var hover = function(){
        clearInterval(timer1);
    }
    var notHover = function(){
        timer1 = setInterval(func,20);
    }
	</script>
	<script type="text/javascript">
		function noticeUp(obj,top,time) {
				 $(obj).animate({
				 	marginTop: top
				 }, time, function () {
				 	$(this).css({marginTop:"0"}).find(":first").appendTo(this);
				 })
			}
			
			 //$(function () {
				 // µ÷ÓÃ ¹«¸æ¹ö¶¯º¯Êý
			var timer = setInterval("noticeUp('.inform .notice ul','-35px',500)", 2500);
			 //});
			 
			 $(function () {
				    $(".notice").hover(function () {
				        clearInterval(timer);
				    }, function () {
				        timer = setInterval("noticeUp('.inform .notice ul','-35px',500)", 2500);
				    })
				})
		
				
		$('.counter').countUp();
	</script>
	
</body>
</html>